<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="telephone=no" name="format-detection">
    <title>付款</title>
	<link rel="stylesheet" href="style.css">
</head>
<body ontouchstart="">
	<div class="pay-wrap" onclick="onBlur()">
        <div class="main">
            <div class="avatar"><img src="avatar.png" alt=""></div>
            <div class="title">向 某某某 付款</div>
            <ul class="form-group">
                <li>
                    <div class="control-label">支付金额</div>
                    <div id="amount" class="form-control" placeholder focus data-placeholder="询问服务员后输入" onclick="onFocus(this)" ontouchmove="onTouchMove(this)">询问服务员后输入</div>
                </li>
                <li>
                    <div class="control-label">备注</div>
                    <div id="remark" class="form-control" placeholder onclick="openPopup()">如包厢号、服务员号等</div>
                </li>
            </ul>
        </div>
        <div class="keyboard" onclick="onInput()">
            <div class="key">7</div>
            <div class="key">8</div>
            <div class="key">9</div>
            <div class="key">4</div>
            <div class="key">5</div>
            <div class="key">6</div>
            <div class="key">1</div>
            <div class="key">2</div>
            <div class="key">3</div>
            <div class="key" data-action="point">.</div>
            <div class="key" data-action="zero">0</div>
            <div id="del" class="key" data-action="del">&#8592</div>
        </div>
        <div id="btn-pay" disabled onclick="onPay()">支付</div>
    </div>
    <div id="popup-remark">
        <textarea name="" id="textarea-remark" placeholder="如包厢号、服务员号等"></textarea>
        <div class="btn-group">
            <div class="btn btn-cancel" onclick="closePopup()">取消</div>
            <div class="btn btn-confirm" onclick="closePopup('confirm')">确定</div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        //使用fastclick阻止移动端点击事件300ms延迟
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }

        var amount = document.getElementById('amount'); //金额
        var amountPlaceholder = amount.getAttribute('data-placeholder'); //金额占位字符
        var remark = document.getElementById('remark'); //备注
        var remarkPopup = document.getElementById('popup-remark');  //备注弹窗
        var textareaRemark = document.getElementById('textarea-remark'); //备注输入框
        var remarkPlaceholder = textareaRemark.getAttribute('placeholder'); //备注占位字符
        var payBtn = document.getElementById('btn-pay'); //支付按钮
        var delBtn = document.getElementById('del'); //删除按钮
        var timeOutEvent;   //长按计时

        //获得焦点
        function onFocus(self) {
            onStopBubble();
            if (self.hasAttribute('focus')) {
                return;
            }
            self.setAttribute('focus', '');
        }

        //失去焦点
        function onBlur() {
            amount.removeAttribute('focus');
            amount.scrollLeft = 0;

            if (amount.hasAttribute('placeholder')) {
                return;
            }

            var str = amount.innerHTML;

            if (str === '.') {
                empty();
            } else {
                //最后一位是小数点的话，移除
                if (str.indexOf('.') === str.length - 1) {
                    amount.innerHTML = str.replace(/\.$/g, '');
                }
            }
        }

        //拖动字符
        function onTouchMove(self) {
            if (!self.hasAttribute('focus')) {
                var e = event || window.event;
                e.preventDefault();
            }
        }

        //输入金额
        function onInput() {
            onStopBubble();
            var e = event || window.event;
            if (amount.hasAttribute('focus') && e.target.className === 'key') {
                var storageStr; //存储输入字符
                var val = e.target.innerHTML;   //当前输入字符
                var action = e.target.getAttribute('data-action');  //按键类型

                //存储初始值
                if (amount.hasAttribute('placeholder')) {
                    if (action === 'del') {
                        return;
                    }
                    amount.removeAttribute('placeholder');
                    storageStr = '';
                } else {
                    storageStr = amount.innerHTML;
                }

                //启用支付按钮
                payBtn.hasAttribute('disabled') && payBtn.removeAttribute('disabled');

                //字符串操作
                if (action === 'del') {
                    //删除字符
                    storageStr = storageStr.slice(0, storageStr.length - 1);

                    //清空
                    if (storageStr === '') {
                        empty();
                        return;
                    }
                } else {
                    var pointIndex = storageStr.indexOf('.');   //小数点位置

                    //输入限制
                    if (
                        (action === 'zero' && storageStr.indexOf('0') === 0 && storageStr.length === 1) || //排除无效0
                        (action === 'point' && storageStr.split('.').length - 1 === 1) || //最多输入一个小数点
                        (pointIndex !== -1 && storageStr.length - 1 - pointIndex === 2) //最多输入两位小数
                    ) {
                        return;
                    }

                    //输入字符
                    storageStr += val;
                }

                //去掉整数前面的0
                if (parseFloat(storageStr) >= 1) {
                    storageStr = storageStr.replace(/^0/, '');
                }

                //赋值
                amount.innerHTML = storageStr;

                //滚动到最后
                amount.scrollLeft = amount.scrollWidth - amount.clientWidth;
            }
        }

        //长按删除
        delBtn.addEventListener('touchstart', function(e){
            timeOutEvent = setTimeout(empty, 500);
            e.preventDefault();
        });
        delBtn.addEventListener('touchmove', function(){
            clearTimeout(timeOutEvent);
        });
        delBtn.addEventListener('touchend', function(){
            clearTimeout(timeOutEvent);
        });

        //清空
        function empty() {
            amount.setAttribute('placeholder', '');
            amount.innerHTML = amountPlaceholder;
            payBtn.setAttribute('disabled', '');    //禁用支付按钮
        }

        //打开备注弹窗
        function openPopup() {
            remarkPopup.style.display = 'block';
            textareaRemark.focus();
            if (remark.hasAttribute('placeholder')) {
                textareaRemark.value = '';
            } else {
                textareaRemark.value = remark.innerHTML;
            }
        }

        //关闭备注弹窗
        function closePopup(action) {
            remarkPopup.style.display = 'none';
            if (action === 'confirm') {
                var val = textareaRemark.value;

                if (val === '') {
                    remark.setAttribute('placeholder', '');
                    remark.innerHTML = remarkPlaceholder;
                } else {
                    remark.removeAttribute('placeholder');
                    remark.innerHTML = val;
                }
            }
        }

        //阻止冒泡
        function onStopBubble() {
            var e = event || window.event;
            e.stopPropagation();
        }

        //支付
        function onPay() {
            onStopBubble();
            onBlur();

            if (amount.hasAttribute('placeholder')) {
                return;
            }

            var data = {
                amount: amount.hasAttribute('placeholder') ? '' : amount.innerHTML,
                remark: remark.hasAttribute('placeholder') ? '' : remark.innerHTML
            };
            console.warn(data)
        }
    </script>
</body>
</html>